---
id: 5dc23991f86c76b9248c6eb8
title: Hatua ya 6
challengeType: 0
dashedName: step-6
---

# --description--

Katika hatua iliyotangulia, unaweka vipengele vya `h1`, `h2`, maoni na `p` ndani ya kipengele cha `main`. Hii inaitwa *nesting*. Vipengee vilivyokua nested vinapaswa kuwekwa nafasi mbili zaidi upande wa kulia wa kipengee ambacho kimewekwa ndani. Nafasi hii inaitwa indentation na inatumika kurahisisha kusoma HTML.

Here is an example of nesting and indentation:

```html
<main>
  <h1>Most important content of the document</h1>
  <p>Some more important content...</p>
</main>
```

Kipengele cha `h1`, kipengele cha `h2` na maoni yamejiingiza katika nafasi mbili zaidi ya kipengele cha `main` katika msimbo ulio hapa chini. Tumia upau wa nafasi (spacebar) kwenye kibodi yako ili kuongeza nafasi mbili zaidi mbele ya kipengele cha `p` ili kiwe vizuri pia.

# --hints--

Msimbo wako unapaswa kuwa na kipengele cha `h2` chenye maandishi `Cat Photos`. Huenda umeifuta kwa bahati mbaya, inakosa tagi za kufungua na kufunga, au maandishi yamebadilika.

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

Haupaswi kuongeza vipengele vya `ul` au `li` kutoka kwa mfano.

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

Hupaswi kubadilisha identation kwenye mstari kwa kipengele chako cha `h2`. Tagi yake ya ufunguzi inapaswa kuanza nafasi 6 kutoka mwanzo wa mstari. Unaweza kuanzisha upya hatua ili kurejesha indentation ya asili.

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

Msimbo wako unapaswa kuwa na maoni. Uliondoa maoni kutoka hatua ya awali.

```js
assert(code.match(/<!--.*-->/));
```

Maoni yako yanapaswa kuwa na maandishi `TODO: Add link to cat photos`. Usibadilishe maandishi au nafasi ya maoni.

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

Haupaswi kubadilisha indentation kwenye mstari na kipengele chako cha maoni. Tagi yake ya ufunguzi inapaswa kuanza nafasi 6 kutoka mwanzo wa mstari. Unaweza kuanzisha upya hatua ili kurejesha indentation ya asili.

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

Msimbo wako unapaswa kuwa na kipengele cha `p`. Umeondoa kipengele cha `p` kutoka hatua ya awali.

```js
assert(document.querySelector('p'));
```

Maandishi ya kipengele cha `p` yanapaswa kuwa `See more cat photos in our gallery.` Usibadilishe maandishi, nafasi, au uakifishaji wa kipengele cha `p`.

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

Tagi ya kufungua ya `p` inapaswa kuwa na indentation inayolingana na `h2` yako na vipengele vya maoni. Tagi yake ya ufunguzi inapaswa kuanza nafasi 6 kutoka mwanzo wa mstari.

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

